<template>


	<div class="page ">

		<div class="heade flex unified-flex-align unified-flex-space-between">

			<el-dropdown @command="changeDropDown">
				<span class="el-dropdown-link">
					{{templateDropdownName}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown" >
					<el-dropdown-item :command="0">
						全部
					</el-dropdown-item>
					<el-dropdown-item v-for="(typeItem,index) in emsTemplate" :key="index+1" :command="index+1">
						{{typeItem.name}}
					</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>

			<search></search>

			<div class="option flex unified-flex-align">
				<el-button type="primary" round icon="el-icon-plus" @click="add">添加分类</el-button>
				<el-button type="primary" round icon="el-icon-plus" @click="add">添加模板</el-button>
				<el-button type="primary" round>访问秒赛</el-button>
			</div>
		</div>

		<!-- 短信模板 -->

		<div class="template-list flex unified-flex-space-between">
			<el-empty v-show="!emsTemplate.length" description="当前短信模板是空的"></el-empty>
			<el-table v-show="emsTemplate.length" :data="templatelist" stripe style="width: 100%">

				<el-table-column type="index" label="#" width="60">
				</el-table-column>

				<el-table-column prop="name" label="模板名称" width="180">

				</el-table-column>

				<el-table-column prop="value" label="模板内容">

				</el-table-column>

				<el-table-column label="addTime" width="140">

					<template slot="header">
						<div class="tableHeader">
							<span>addTime</span>
						</div>
					</template>

					<template slot-scope="data">
						<div class="tableHeader">
							<span>{{data.row.addTime | turnTime}}</span>
						</div>
					</template>

				</el-table-column>

				<el-table-column label="State" width="140">

					<template slot="header">
						<div class="tableHeader">
							<span>State</span>
						</div>
					</template>

					<template slot-scope="data">
						<div class="tableHeader">
							<span>{{data.row.status}}</span>
						</div>
					</template>

				</el-table-column>



				<el-table-column label="操作" width="140">

					<template slot="header">
						<div class="tableHeader">
							<span>操作</span>
						</div>
					</template>

					<template>
						<div class="tableHeader flex unified-flex-space-between unified-flex-align">
							<el-button type="primary" size="mini" @click="edit(index)">编辑</el-button>
							<el-button type="primary" size="mini" @click="remove(index)">删除</el-button>
						</div>
					</template>



					<template slot-scope="data">

						<div class="tableHeader flex unified-flex-space-between unified-flex-align">
							<el-button type="primary" size="mini" @click="edit(data.$index)">编辑</el-button>
							<el-button type="danger" size="mini" @click="remove(data.$index)">删除</el-button>
						</div>

					</template>

				</el-table-column>
			</el-table>




		</div>
		<!-- 分页 -->
		<div v-show="emsTemplate.length" class="unified-pagination unified-bg-white">
			<el-pagination :page-sizes="[10, 20, 30, 40]" :page-size="template_limit"
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>

		<!-- 弹窗 -->
		<transition name="el-fade-in">
			<div class="addForm" v-show="pageLoadingShow">

				<div class="heade flex unified-flex-align unified-flex-space-between"
					:class="{'editForm':showMode == 1}">
					<p>{{showMode==0?'添加短信模板':"编辑短信模板"}}</p>
					<el-button @click="hidden" type="danger" plain size="small" icon="el-icon-circle-close" circle>
					</el-button>
				</div>
				<el-alert title="带辅助性文字介绍" type="success"
					description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
				</el-alert>

				<div class="form">
					<p class="form-title">模板名称</p>
					<el-input v-model="Form.templateName" class="templateNmae-input"></el-input>
					<p class="form-title">模板内容</p>
					<el-input v-model="Form.templateValue" class="templateValue-input"></el-input>
					<div class="sumbit">
						<el-button type="primary" @click="sumbit">提交</el-button>
					</div>
				</div>


			</div>
		</transition>


	</div>

</template>

<script>
	import {
		mapState
	} from 'vuex'

	import search from '../../components/search/search.vue'
	// 引入 VUE mixin
	import {
		ems
	} from '../../mixin/mixin.js'
	export default {
		mixins: [ems],
		components: {
			search
		},
		computed: {
			...mapState(['emsTemplate', 'pageLoadingShow'])
		},
		data() {

			return {
				api: this.$api.ems,
				// 当前选择的模板
				templateIndex: 0,
				// 弹窗模式   0:新增模板  1:修改模板
				showMode: 0,
				// 当前编辑的模板
				editTemplateIndex: null,
				// 添加新模板表单数据
				Form: {
					templateType: "",
					templateName: "",
					templateValue: ""
				},

			}

		},
		methods: {
			// 添加模板
			add() {
				this.showMode = 0
				// 初始化表单数据
				this.Form.templateName = ""
				this.Form.templateValue = ""
				this.$store.commit('showLoading', true)
			},
			// 隐藏弹窗
			hidden() {
				this.$store.commit('showLoading', false)
				this.editTemplateID = ""
				this.Form.templateName = ""
				this.Form.templateValue = ""
			},
			// 提交新模板
			sumbit() {
				if (this.showMode) {
					this.$axios({
						url: this.api,
						method: "PUT",
						params: {
							"action": "edit",
							"params": {
								id: this.emsTemplate[this.editTemplateIndex]._id,
								templateName: this.Form.templateName,
								templateValue: this.Form.templateValue
							}
						}
					}).then(res => {

						console.log(res.data);

					})

				} else {
					this.$axios({
						url: this.api,
						method: "POST",
						params: {
							"action": "add",
							"params": {
								templateType: 'miaosai',
								templateName: this.Form.templateName,
								templateValue: this.Form.templateValue
							}
						}
					}).then(res => {
						if (res.data.code == 2024) {
							this.$message({
								message: '添加模板成功',
								type: 'success'
							});
							// 将新数据添加到VUEX
							this.$store.commit('addEmsTemplate', [res.data.data])
							// 隐藏弹窗
							this.hidden()

						} else {
							this.$message({
								message: res.data.msg,
								type: 'error'
							});
						}
					}).catch(err => {
						console.log(err);
					})

				}
			},


			// 点击删除
			remove(index) {

				this.$confirm('此操作将永久删除该短信模板, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let api = this.$api.ems
					let id = this.emsTemplate[index]._id
					this.$axios({
						url: api,
						method: "delete",
						params: {
							"action": "remove",
							"params": {
								id
							}
						}
					}).then(res => {
						if (res.data.code == 2024) {
							this.$message({
								message: res.data.msg,
								type: 'success'
							});
							this.$store.commit('removeEmsTemplate', index)
						} else {
							this.$message({
								message: res.data.msg,
								type: 'error'
							});
						}

					})
				}).catch(() => {

				});






			},
			// 点击编辑
			edit(index) {
				this.showMode = 1
				this.$store.commit('showLoading', true)
				let id = this.emsTemplate[index]._id
				this.editTemplateIndex = index
				// 向服务器获取模板信息
				this.$axios({
					url: this.api,
					method: "get",
					params: {
						"action": "get",
						"params": {
							id
						}
					}
				}).then(res => {

					let {
						templateName,
						templateValue,
					} = res.data
					this.Form.templateName = templateName
					this.Form.templateValue = templateValue
				})
			}
		},
		mounted() {

		}
	}
</script>

<style scoped="scoped">
	.page {
		padding: 0px 20px;

	}


	.heade {
		justify-content: space-around;
		margin: 0px 0px;
		height: 60px;
	}

	.type {
		height: 100%;
		margin-right: 20px;
		margin-left: 10px;
	}

	.type /deep/ span {
		font-size: 16px;
	}

	.type-li {
		height: 100%;
		font-size: 16px;
	}

	.type-li::after {
		content: "|";
		color: #c3c3c324;
		vertical-align: middle;
		margin: 0px 18px;

	}

	.type-checked {
		color: #B94A48;
		text-decoration: underline;
		text-underline-position: 13px;
	}

	.template-list {
		width: 100%;
		background-color: #fff;
		padding-top: 15px;
		box-sizing: border-box;
		/* border-right: 5px solid #C3C3C344; */
		flex-direction: column;
	}

	.template-list-li {
		width: 100%;
		height: 45px;
		background-color: #fff;
		font-size: 12px;
		line-height: 45px;
		padding: 0px 20px;
		box-sizing: border-box;
		letter-spacing: 1px;
	}

	.template-list-li span:nth-child(2) {
		color: #8C939D;
		letter-spacing: 0px;
	}

	.template-list-li-checked {
		background-color: #ff7533;
		color: #fff;

	}

	.title {
		font-size: 12px;
		color: #8C939D;
		/* text-indent: 20px; */
		margin-bottom: 10px;
	}

	.temo {
		flex: 1;
	}



	.template-content {
		flex: 1;
		height: 100%;
		background-color: #fff;
		padding-top: 15px;
		margin-left: 25px;
	}

	.content {
		display: block;
		width: 100%;
		height: 330px;
		background-color: #c3c3c322;
		border-radius: 6px;
		margin-bottom: 15px;
		font-size: 14px;
		letter-spacing: 1px;
		padding: 15px;
		box-sizing: border-box;

	}

	.user-list {
		width: 100%;
		border-radius: 6px;
		height: 300px;
		background-color: #c3c3c322;
	}

	.add-template {
		width: 100%;
		height: 45px;
		background-color: #2C3E50;
		color: #fff;
	}

	.addForm {
		width: 80%;
		height: 85%;
		position: absolute;
		z-index: 20;
		top: 50%;
		left: 50%;
		background-color: #fff;
		transform: translate(-50%, -50%);
		border-radius: 20px;
		overflow: hidden;
	}

	.editForm {
		background-color: #42B983 !important;
	}

	.sumbit {
		margin-top: 15px;
	}

	.form-title {

		font-size: 12px;
		margin: 8px 0px;
		color: #8C939D;

	}

	.addForm>.heade {
		width: 100%;
		height: 60px;
		background-color: #2269F3;
		margin: 0;
		justify-content: space-between;
		padding: 0px 15px;
		padding-left: 24px;
		color: #fff;
		font-size: 14px;
		letter-spacing: 1px;
		box-sizing: border-box;
	}

	.Tag-li {
		background-color: transparent;
		text-align: center;
		line-height: 40px;
		width: 50%;
		height: 100%;
		z-index: 10;
		letter-spacing: 1px;
	}

	.Tag {
		width: 250px;
		height: 40px;
		display: flex;
		border-radius: 20px;
		overflow: hidden;
		position: relative;
	}

	.tag-checked {
		width: 50%;
		height: 100%;
		/* background-color: #2269F350; */
		position: absolute;
		opacity: .8;
		left: 0;
		top: 0;
		border-radius: 20px;
		z-index: 0;
	}

	.option {
		flex: 1;
		justify-content: flex-end;
	}
</style>
